<template>
  <div class="app-container">
    <el-dialog v-model="open" :close-on-click-modal="false" append-to-body width="40%" @close="cancel">
      <template #header>
        <div style="cursor: move;">
          库房单位信息：<span class="mr10" style="color:#FF8C00">{{ row.storageName }}</span>
        </div>
      </template>
      <el-row :gutter="10">
        <el-col :span="16">
          <el-table :border="true" :data="materialVsSubordinateList" :header-cell-style="$headerCellStyle" :stripe="true"
                    height="300px"
                    highlight-current-row>
            <el-table-column :align="'center'" label="排序" prop="sort" width="60"></el-table-column>
            <el-table-column :align="'center'" label="等级" prop="sort" width="60">
              <template #default="scope">
                <div>
                  <dict-data-tag :options="dictDataMap['material_from_level']" :value="scope.row.materialFromLevel"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column :align="'center'" label="自身库房" prop="selfStorageName"/>
            <el-table-column :align="'center'" label="对应库房" prop="subordinateStorageName"/>

            <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作" width="90">
              <template #default="scope">
                <el-button
                  type="danger"
                  @click="handleDelete(scope.row)"
                >
                  <template #icon>
                    <i-ep-delete/>
                  </template>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNum"
            :total="total"
            @pagination="getList"
          />
        </el-col>
        <el-col :span="8">
          <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="库房等级" prop="materialFromLevel">
              <el-select v-model="form.materialFromLevel" class="width-120" clearable placeholder="请选择库房等级">
                <el-option v-for="dict in dictDataMap['material_from_level']" :key="dict.dictValue"
                           :disabled="dict.dictValue === '3'"
                           :label="dict.dictLabel" :value="dict.dictValue"/>
              </el-select>
            </el-form-item>
            <el-form-item label="对应库房" prop="subordinateStorageId">
              <drug-storage-dept ref="drugStorageDeptRef" :org-id="queryParams.orgId" :value="form.subordinateStorageId"
                                 :value-storage-id="form.subordinateStorageId" class="import-master"
                                 style="width: 200px"
                                 @drugStorageChange="subordinateStorageIdClick"/>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="form.sort" class="width-120" placeholder="请输入排序" type="number"/>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <template #footer>
            <span class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {useDictStoreHook} from "@/store/modules/dict.ts";
import {addMaterialVsSubordinate, delMaterialVsSubordinate, selectPageMaterialVsSubordinate} from "@/api/material/materialVsSubordinate.ts";

const dictStore = useDictStoreHook();
const dictDataMap = ref<any>(dictStore.isTypeGetData('material_storage_dept_type', 'material_from_level'))
// 是否显示弹出层
const open = ref(false)
const row = ref<any>({})
const formRef = ref<any>()
const buttonLoading = ref(false)
const form = ref<any>({
  selfStorageId: '',
  materialFromLevel: '0',
  subordinateStorageId: '',
  storageId: '',
  orgId: ''
})
const materialVsSubordinateList = ref<any>([])
const total = ref(0);
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  storageId: '',
})

const rules = ref({
  materialFromLevel: [
    {
      required: true, message: "库房等级不能为空", trigger: "change"
    }
  ],
  subordinateStorageId: [
    {
      required: true, message: "对应库房不能为空", trigger: "change"
    }
  ],
})


function getRowList(rowInfo: any) {
  nextTick(() => {
    open.value = true
    row.value = rowInfo
    form.value.storageId = rowInfo.storageId
    form.value.selfStorageId = rowInfo.storageId
    queryParams.value.selfStorageId = rowInfo.storageId
    form.value.orgId = rowInfo.orgId
    getList()
  })
}


function getList() {
  selectPageMaterialVsSubordinate(queryParams.value).then((res: any) => {
    materialVsSubordinateList.value = res.rows
    total.value = res.total
  })
}


/** 提交按钮 */
function submitForm() {
  (formRef.value as any).validate(valid => {
    if (valid) {
      addMaterialVsSubordinate(form.value).then(() => {
        ElMessage.success("添加成功")
        form.value.sort = ""
        form.value.subordinateStorageId = ""
        getList()
      })
    }
  })
}

function handleDelete(row: any) {
  delMaterialVsSubordinate(row.materialVsSubordinateId).then(() => {
    ElMessage.success("删除成功")
    getList()
  })
}

/**
 * 下级库房
 */
function subordinateStorageIdClick(obj: any) {
  form.value.subordinateStorageId = obj.id
}

// 取消按钮
function cancel() {
  form.value.sort = ""
  form.value.materialFromLevel = "0"
  form.value.subordinateStorageId = ""
  open.value = false;
}

defineExpose({
  getRowList
})
</script>


<style scoped>

</style>
